Copyright: Help-file created with HelpMaker 2.1


Sisällys
Help created with evaluation version of HelpMaker 2.1

Sisällys

EasyHtml versio 2.2 Windows 95/98/NT

Tämä help-tiedosto auttaa sinua kaikessa EasyHtml ohjelmaan liittyvässä asiassa sekä HTML-ohjelmoinnissa.

EasyHtml:llä on helppo tehdä HTML (HyperText Markup Language) tiedostoja, sillä EasyHtml tekee perusasiat puolestasi.

Valitse aihe seuraavista:

Laitevaatimukset

Historia

Bugi lista

FAQ

Kuvat

Värit

Fontit

Hieman HTML:n alkeita

Linkit

Meta

Taulukot

Muita HTML-koodeja

Esikatselu

Lomakkeet

Asetukset

Listat

Raamit, frames

JavaScript

Upottaminen

Käyttäjän tagit

Erikoismerkit

ESKO, sisään rakennettu selain

Imagemap

Jos löydät bugeja tai on kysyttävää EasyHtml:stä tai HTML-ohjelmoinnista niin E-mailaa minulle "toni.helenius@saunalahti.fi" voit myös käydä kotisivullani "http://www.saunalahti.fi/tonihele". Kotisivuiltani saat aina viimeisimmät versiot EasyHtml:stä!

EasyHtml on täysin ilmainen joten voit levittää sitä kaikille kunhan et muuttele sitä!

EasyHtml:n on tehnyt ToniArts, Toni Helenius, tarkistanut sekä testannut Roope Lehto "roope.lehto@kolumbus.fi"

kotisivu: "http://www.kolumbus.fi/~risleh/roope.htm"

Tämän helpin on tehnyt Roope Lehto ja Toni Helenius.

Erityiset kiitokset Juho Jokiselle "http://www.saunalahti.fi/~juosjo" ToniArts logon piirtämisestä. Sekä Webcom:lle "http://www.webcom.se" EasyHtml:n tuesta ja kuvista.

Kiitokset myös:

Andrew Crew

Jordan Russel

Zieglersoft

Nicolas

Jarkko Laivuori


FAQ
Help created with evaluation version of HelpMaker 2.1

FAQ

FAQ tulee sanoista "Frequently Asked Questions", joka tarkoittaa suomeksi "usein kysytyt kysymykset". Olen koonnut tänne myös yleisesti kaikkia ohjelmiani koskevia kysymyksiä.

Q1. Ovatko ToniArts:n ohjelmat vuosi 2000-yhteensopivia?

A1. Kyllä.


Imagemap
Help created with evaluation version of HelpMaker 2.1

Imagemap

Imagemap eli kuvakartta, sen avulla on helppo luoda vaikka sivun navigointi näyttäväksi ja helpoksi. Perinteisien teksti- ja nappi-linkkien sijaan voit luoda helposti esim. "kaukosäätimen", sinun ei tarvitse enään rakentaa näyttävää kuvaa useista palasista jotka on määritelty linkittämään sivun eri osiin, vaan voit luoda kuvan käsittely ohjelmalla kokonaisen kuvan ja lisätä siihen vaikkapa EasyHtml:n Image-mapavustajalla kohdat joita klikkaamalla pääsee sivujen eri kohtiin.

EasyHtml:n Image-mapavustaja etsii automaattisesti aktiivisesta sivustasi kuvat, sinun tulee vain valita kuva avustajan kuva-listasta. Ja ruveta piirtämään...

Imagemap-systeemissä on 4 erillaista aluetta: Suorakulmio, ympyrä, monikulmio (polygoni) sekä ns. magneetti. Jokaiselle alueelle voidaan määritellä arvoja, kuten linkin kohde (URL), alueen selitys (ALT), linkin kohde raami-rakenteessa (TARGET) sekä javascriptiä; OnMouseOver ja OnMouseOut. Lisäksi koko kartalle on määritettävä uniikki nimi. Kuvakartta voidaan määrittää, yllätys yllätys, vain kuvaan seuraavasti:

<IMG SRC="kuva.jpg" USEMAP="#Tonin kartta">

Tonin kartta voisi olla esimerkiksi tälläinen. Seuraavassa koodi pätkässä kaikki 4 aluetta on määritelty sekä oletus osoitetta ei ole:

<MAP NAME="Tonin kartta">

<AREA SHAPE="rect" HREF="http://www.osoite.fi" COORDS="38,62,208,159" ALT="Suorakulmio" TARGET="_parent">

<AREA SHAPE="circle" HREF="http://www.osoite.fi" COORDS="99,265,59" ALT="Ympyrä" TARGET="_parent">

<AREA SHAPE="point" HREF="http://www.osoite.fi" COORDS="228,214" ALT="Magneetti" TARGET="_parent">

<AREA SHAPE="poly" HREF="http://www.osoite.fi" COORDS="290,80,359,136,372,275,249,202,249,29,295,174" ALT="Monikulmio" TARGET="_parent">

<AREA SHAPE="default" NOHREF>

</MAP>

Eli SHAPE määrää alueen muodon, HREF linkin kohteen (URL), COORDS alueen koordinaatit kuvassa, ALT alueen selityksen sekä TARGET linkin avautumis kohteen raami rakenteessa. Karttaan ei ole määritetty JavaScriptiä.


ESKO, sisään rakennettu selain
Help created with evaluation version of HelpMaker 2.1

ESKO, sisään rakennettu selain

ESKOssa näet nopeasti miltä sivusi tulisivat näyttämään selaimella. Se on nopeampi käyttää kun ns. ulkoiset selaimet. ESKOa voit katsoa suoraan pääruudussa kun editoit sivuja tai kokoruudussa, kokoruutu-tila soveltuu myös "muun" internetin selailuun. Jos taas käytät ESKOa pääruudussa voit laittaa ASETUKSISTA (F12) "Päivitä ESKO automaattisesti" päälle niin voit katsoa muutoksia sivullasi kun kirjoitat!

ESKOssa on kaksi moodia:

IE-moodi = Tämä moodi tarvitsee MS Internet Explorer 3 tai uudemman (vaikket "omistaisikaan" IE:tä kokeile tätä moodia sillä useimmat windowsit "esiasentavat" sen). IE-moodi on kyvyiltänsä sama kuin asennettu IEsi.

EH-moodi = Tämä moodi on tehty sille vähemmistölle, joka ei pysty käyttämään IE-moodia. EH-moodi lukee HTML 2.x. Huom! Vaikka EH-moodi näyttäisikin "Mona Lisa":n kuvan tilalla se ei tarkoita sitä että olisit määritellyt kuvan väärin HTML-dokumenttiisi.


Erikoismerkit
Help created with evaluation version of HelpMaker 2.1

Erikoismerkit

Erikoismerkkiavustajaan on määritelty 100 merkkiä ja niille HTML-koodit. On suositeltavaa että käytät Erikoismerkkiavustajaa (eli erikoismerkkien HTML-koodeja) AINA kun laitat erikoismerkkejä HTML-dokumenttiisi, erikoismerkkejä ovat myös skandinaaviset merkit kuten ÅÄÖ. Sillä jos sivusi katselijan käyttöjärjestelmään EI ole asennettu esim. skandinaavisia merkkejä, hän näkee epämääräisiä merkkejä (kuten neliötä ja viivoja) Å:n, Ä:n ja Ö:n tilalla. Mutta jos määrittelet erikoismerkit HTML-koodein esim. Ä on &Auml; niin selain automaattisesti piirtää Ä:n.

HUOM! Kuten varmaan jo tiedät, että vaikka pistäisit kuinka monta välilyöntiä tahansa HTML-dokumenttiin, se ei näy selaimessa. Mutta jos määrittelet välilyönnin HTML-koodein (Erikoismerkkiavustajassa ensimmäisen rivin ensimmäinen merkki [tyhjä]) niin selain näyttää niin paljon välilyöntejä kuin olet HTML-koodein määrittänyt!


Käyttäjän tagit
Help created with evaluation version of HelpMaker 2.1

Käyttäjän tagit

Käyttäjän tageihin voit tallentaa omia tageja ja lisätä niitä kätevästi. Voit tallentaa niin monta yksirivistä koodia kuin haluat (tai kovalevylläsi on tilaa) sekä 10 monirivistä koodia.

Tässä muutama selitystä vaativa arvo:

Luku = Tarkoittaa väliä johon valittu teksti lisätään kun painetaan "Lisää koodi". "Luku" lasketaan tekstin/tagien alusta esim. <TAGI>valittu teksti</TAGI> luku olisi 6.


Upottaminen
Help created with evaluation version of HelpMaker 2.1

Upottaminen

Upotusavustajalla voit "upottaa" tiedostoja HTML-dokumenttiisi, jolloin sivusi katselija voi käyttää niitä suoraan sivuiltasi. Upottamista monesti käytetään vain tuomaan kotisivulle musiikkia jota käyttäjä voi kelata, pysäyttää... jne... Se on helppo tehdä, menet vain Upotusavustajaan ja valiset tiedostoksi jonkin musiikki-tiedoston (se voi olla mikä tahansa, mutta se toimii vain jos sivusi katselijalla on jokin ohjelma liitettynä siihen, esim. MID-tiedostoon vaikka MediaPlayer).

Upottaminen käyttää OLE-tekniikkaa (Object Linking and Embedding), saadaksesi siitä lisä tietoja mene ESIKATSELU-aiheeseen tai avaa Windows:n helppi ja kirjoita hakusanaksi OLE.

Vinkki! Luodaksesi hienon musiikin soittajan:

1. Etsi/tee kaijuttimen kuva ja ota kuvan korkeus/height muistiin.

2. Avaa EasyHtml:n Upotusavustaja.

3. Paina Upotusavustajassa "Avaa upotettava tiedosto" ja etsi sopiva MID- tai WAV-tiedosto ja laita korkeudeksi kaiuttimen kuvan korkeus. Lisää koodi.

4. Lisää tagin <EMBED....> eteen Kuva-avustajalla koodi jossa IMG SRC:n arvona on kaiuttimen kuva.

5. Lisää tagin <EMBED....> jälkeen Kuva-avustajalla koodi jossa IMG SRC:n arvona on kaiuttimen kuva.

6. Valise teksti jonka olet luonut ja paina työkaluriviltä KESKITÄ-painiketta. HUOM! Toimii vain jos ASETUKSISSA (F12) "Korvaa valittu teksti koodin automaattisessa lisäyksessä" EI ole valittuna.

7. Koodin pitäisi näyttää suurinpiirtein tältä "<CENTER><IMG SCR="kaijuttimeni.kuva"....><EMBED SRC="my.music"><IMG SCR="kaijuttimeni.kuva"....></CENTER>". Esikatsele ja ihastele!


JavaScript
Help created with evaluation version of HelpMaker 2.1

JavaScript

Kaikki 12 (+1, mallina käyttäjäntageissa) JavaScriptiä EasyHtml:ssä ovat Nicolaksen lahjoittamia, hänen sivuiltaan löytyy lisää niitä, "http://www.javascript-page.com".

JavaScriptien lisääminen on helppo tapa lisätä sivujesi ulkonäköä. Niitä on helppo myöskin tehdä itse tai customoida, sillä se vaatii vain tekstinkäsittely ohjelman (esim. muistio/memo riittää mainiosti) sekä hieman taitoa. JavaScriptien tekoon löydät ohjeita internetistä, esim. hakusanoilla "how to make javascript", "making javascript", "javascript"...jne...

EasyHtml:n JavaScript ikkunassa näet aina valitsemastasi JavaScriptistä suurpiirteisen mallin, miten se tulisi toimimaan sivullasi sekä ohjeita valitsemasi JavaScriptin customoimiseen ja asennukseen.

Yleistietoa javasta ja javascripteistä:

JavaScript vs Java, JavaScript ja Java menevät usein sekasin, mutta ehkä tämä selventää asiaa.

JAVA on kieli kuten HTML:kin, mutta niiden tekeminen vaatii sille tarkoitetun ohjelman ja/tai kääntäjän, kuten esim. Inprisen JBuilder. Javalla voi tehdä joko tavallisia konekielelle (EXE) käännettyjä ohjelmia tai Internetissä käytettyjä "JavaAppletteja".

JAVASCRIPT on kevennetty versio JAVA:sta, joita voidaan tehdä esimerkiksi muistiolla/memolla tai millä tahansa ohjelmassa joka osaa luoda ASCII-teksti tiedostoja (tavallisia txt-tiedostoja), sen vuoksi sitä kutsutaan jokamiehen javaksi. JavaScriptien tekoon löytyy internetistä ohjeita ja apuohjelmia. JavaScript on tehty internettiä varten.


Frame
Help created with evaluation version of HelpMaker 2.1

Frame

Frameilla, eli kehyksillä voi jakaa kotisivun kahteen tai useampaan osaan, joista jokainen on eri HTML-sivu.

EasyHtml:ssä ei ole vielä kovinkaan paljon Frameista (Enemmän seuraavassa versiossa). Tiedosto-valikosta voi kuitenkin valita: Uusi --> "Frame".

Kehykset tulevat aina <FRAMESET>- tagien väliin. FRAMESET-tagissa määritellään, kuinka moneen ja minkäkokoisiin osiin sivu jaetaan.

Kehyksessä näkyvä sivu taas määritellään tagilla: <FRAME src="sivu.htm">

Esim:

<FRAMESET COLS="20%,80%">

<FRAME SRC="sivu1.htm" NAME="vasen">

<FRAME SRC="sivu2.htm" NAME="oikea">

<NOFRAME>

Tähän väliin tulee teksti, joka näkyy, jos katselijan selain, ei tue frameja.

</NOFRAME>

</FRAMESET>

Äskeinen esimerkki luo sivun, joka on jaettu leveyssuunnassa kahteen osaan, joista vasen on 20 % sivun leveydestä ja oikea 80 %.

Vasemmassa kehyksessä näkyy sivu1.htm niminen sivu ja oikeassa sivu2.htm

Jos haluaa, kehysten olevan sivusuunnassa, laitetaan FRAMESET-tagiin COLS-parametrin tilalle ROWS.

Kehyksiä saa enemmän, jos laittaa COLS tai ROWS sanan jälkeen useampia lukuja.

Jos haluaa, että vasemmanpuoleisen kehyksen linkit avautuu oikeanpuoleiseen kehykseen, täytyy sivu1.htm tehdä näin:

<HTML>

<HEAD>

<TITLE></TITLE>

<BASE TARGET="oikea">

jne...

Jos haluaa, että oikeanpuoleisen kehyksen linkit avautuvat koko ikkunaan, eikä kehykseen, täytyy sivu2.htm tehdä näin:

<BASE TARGET="_parent">

Lisäksi <FRAMESET> tagiin voi määritellä kehysten paksuuden laittamalla: "FRAMEBORDER=#"

<FRAME SRC>-tagiin voi määritellä voiko katselija muokata kehyksen kokoa:

noresize estää koon muuttamisen sekä tuleeko kehykseen vierityspalkit: scrolling="auto/yes/no".


Marquee
Help created with evaluation version of HelpMaker 2.1

Marquee

Marquee tarkoittaa ruudun poikki vierivää tekstiä. Marquee toimii vain internet explorer- selaimilla.

EasyHtml:ssä on marquee-avustajassa valittavana seuraavat toiminnot:

Linjaus

- Määrittelee marquee-tekstin asemoinnin

Käyttäytyminen

- Määrittelee, liukuuko, vieriikö, vai liikkuuko teksti edestakaisin.

Suunta

- Mertoo suunnan, johon teksti vierii

Korkeus ja Leveys

- Marqueen korkeus sekä leveys

Vaaka- ja pystymarginaali

- Määrittelee marqueen ympärillä olevan tyhjän tilan pysty- ja vaakasuunnassa

Toistokerrat

- Kertoo, kuinka monta kertaa teksti vierii ruudun poikki, jos tähän kohtaan ei laiteta mitään, kulkee teksti loputtomasti

Viive

- Aika, jonka teksti on paikoillaan ruudulla

Nopeus

- Tekstin vierimisnopeus


Meta
Help created with evaluation version of HelpMaker 2.1

Meta

Meta-tagilla kuvataan dokumentin tekijä, sisältö ja annetaan joillekkin hakukoneille tietoa sivujen sisällöstä. Meta-tagit eivät ole pakollisia, mutta osoittavat hyvää palvelua ja auttavat osaltaan muita löytämään sivusi hakukoneilla.

Kaikki meta-tagit sijoitetaan Head-lohkoon Title ja /Title-tagien jälkeen. Eli:

<HTML>

<HEAD>

<TITLE>...</TITLE>

<META..........>

jne.

"Meta" selitys (description) = Dokumentin sisällys. Lyhyt selvitys mitä sivusi pitää sisällään. Hakukoneet käyttävät näitä sivun selityksenä.

"Meta" avainsanoja (keywords) = Hakusanoja jonka avulla haluat muiden löytävän sivusi. Erota eri hakusanat pilkulla esim. Toni Helenius, Toni, Helenius jne... Hakukoneet löytävät sivusi näiden avulla.

"Meta" virkistys (refresh) = Content-kohtaan määrittele aika sekuntteina, milloin sivu vaihtuu (Meta avustajassa "käytä sivua") tai latautuu uudestaan. URL-kohtaan määrittele mikä sivu avautuu.

"Meta" tekijät (author) = Sivun tekijä tai tekijät.

"Meta" aihe (classification) = Dokumentin luokitus mihin aihealueeseen sivusi kuuluu. Oletusarvo Meta avustajassa on "internet/homepage" joka tarkoittaa tavallista kotisivua.

Kaikissa meta-käskyissä haluttu tai halutut mm. avainsanat (keywords), selitykset (description) jne... määritellään CONTENT-lohkoon. Esim 1. <META NAME="keywords" CONTENT="Pelejä, Ohjelmia, Toni Helenius, Toni, Helenius">. Esim 2. <META NAME="author" CONTENT="Toni Helenius">. Esimerkki 1:ssä CONTENT-lohko sisältää avainsanoja (keywords [määritelty NAME-lohkossa]), joiden avulla hakukoneet löytävät sivun. Eli jos hakusanaksi kirjoittaa esim. Toni, niin hakukone löytää sivun. Esimerkki 2:ssa CONTENT-lohko sisältää tekijän nimen (author[määritelty NAME-lohkossa]) joka on esimerkissä Toni Helenius.


Asetukset
Help created with evaluation version of HelpMaker 2.1

Asetukset

EasyHtml:n asetukset löydät tiedosto-valikosta, tai painamalla F12.

Asetuksilla voit vaikuttaa EasyHtml:n toimintaan. EasyHtml tallentaa halutessasi tekemäsi asetukset ja lataa ne joka käynnistyskerralla.

Tässä hieman selitystä asetuksista joita voit valita:

Automaattinen rivinvaihto: Tarkoittaa juuri sitä lyhyesti! Joissakin käyttöjärjestelmissä Automaattisen rivinvaihdon pois jättö aiheuttaa pieniä virheitä tagien Väri-koodauksessa!

Korvaa valittu teksti koodin automaattisessa lisäyksessä: Jos tämä on valittu niin aina kun painaa esim. nappia joka luo koodin <CENTER></CENTER> niin valittu teksti korvataan tällä. Jos tätä ei ole valittu niin EasyHtml loisi koodin joka näyttää tältä <CENTER>valittu teksti</CENTER>. Tämä asetus ei koske kaikkia, esim. kuva-avustaja ei toimi yllä mainitulla tavalla.

Lataa aina käynnistäessä viimeksi tallennettu/ladattu tiedosto: Tarkoittaa juuri sitä!

Värikoodaus: Väri-koodaus päälle ja pois!

Väri-koodauksen pääväri: Vaihda väriä mieleiseksesi, väri värjää jokaisen kirjaimen tagien < ja > välissä valitsemallasi värillä (paitsi se ei värjää joitakin sanoja jotka olen määritellyt).

Käytä vain yhtä väriä: Kaikki tagit samanvärisiä (myös erikseen määritellyt kohdat).

Päivitä väri-koodaus joka näppäin painalluksella: Jonkun näppäimen painuessa pohjaan väri-koodaus päivittyy. Tämä mahdollistaa ettei bugeja ilmaannu väri-koodauksessa, mutta se aiheuttaa joillakin näytöillä värinää!?!

Taustakuva: Määrittelee EasyHtml:n taustakuvan (oletus, ei mitään tai omavalintainen taustakuva).

Tyyli: Määrittelee onko taustakuva keskitetty (yksi kuva), vierekkäin, vai yksi kuva venytettynä ruudun kokoiseksi.

Selain: "Muut selaimet" valinta käynnistää aina esikatselussa OLETUS SELAIMEN, mutta joillakin Netscapen versioilla tämä ei toimi, joten jos sinulla on Netscape oletus selaimena niin käytä "Netscape" valintaa. Jos sinulla on Netscape valittuna niin sinun täytyy määrittää NETSCAPE.EXE:n sijainti (jos käytät communicatoria niin netscpe.exe löytyy ....\Communicator\Program\).

Päivitä ESKO automaattisesti...: Päivittää ESKOn automaattisesti x sekunnin välein.

Täytä kuva-avustajassa automaattisesti koko-arvot: Kun valitset kuvan kuva-avustajassa, voidaan pituus- ja leveys-arvot täyttää automaattisesti. Joidenkin mukaan tämä nopeuttaa sivujen latausta, mutta omasta mielestäni ei. Se vain tekee sivuista järkevän ja luettavan näköiset ennen kuin kuvat on ladattu, koska tämän avulla niille voidaan jättää niiden tarvitsema tila.

Sijoita avustajien koodit automaattisesti: Sijoittaa avustajien koodit automaattisesti oikealle paikalleen. Huom! Vain jotkut koodit pystytään sijoittamaan oikealla paikalle automaattisesti, näitä ovat mm. BODY-tagiin kuuluvat määreet sekä ns. META-tagit.


Esikatselu
Help created with evaluation version of HelpMaker 2.1

Esikatselu

Jos asetuksissa on valittuna "Muut selaimet...": EasyHtml:n esikatselu käyttää OLE (Object Linking and Embedding) tekniikkaa. Se hakee html-dokumenttisi "katselijaksi" ohjelman johon on kytketty htm ja html päätteiset tiedostot. Yleensä kaikki internet selaimet jotka asennat, kytkevät htm ja html päätteiset tiedostot itseensä.

Jos esikatselu EasyHtml:ssä ei toimi, sinulla on luultavasti väärä ohjelma kytkettynä html-tiedostoihin tai sinulla on väärä versio OLE:n dll tiedostoista.

OLE tekniikka on luotettavaa, mutta se vaatii paljon potkua koneelta, joten vaikka EasyHtml:n esikatselu lataisi kauan niin älä hermostu: se ei petä!

Jos asetuksissa on valittuna "Netscape":  EasyHtml:n esikatselu käyttää DDE (Dynamic Data Exchange) tekniikkaa. Toimiakseen se tarvii kohteen EXE-tiedoston sijainnin. Se lähettää "viestejä" kohteelle, ja kohde reagoi "viestin" määräämällä tavalla.

Jos esikatselu EasyHtml:ssä ei toimi, sinulla on LIIAN vanha Netscape määriteltynä asetuksiin (F12) tai Netscape.exe:n sijainti on virheellinen tai puuttuu kokonaan.

DDE tekniikka on luotettavaa ja nopeaa!


Lomakkeet
Help created with evaluation version of HelpMaker 2.1

Lomakkeet

Lomakkeet toimivat sähköpostin kautta, joten jos laitat kotisivullesi lomakkeita, sinulla täytyy myös olla sähköpostiosoite.

Kentät/alueet tulevat aina tagien <FORM> ja </FORM> väliin.

Jos haluat, että lomakkeesi kautta voi lähettää jotain, täytyy <FORM> - tagiin kirjoittaa:   <FORM method="Post" action="">  action- osioon tuleva teksti riippuu palvelimesi CGI- järjestelmästä.

Esim. kolumbuksella postituslomake toimii näin:

<FORM ACTION="/cgi-bin/postita" METHOD="POST">

Palvelimeltasi löytyy varmasti ohjeet, mitä lomakkeeseen kuuluu laittaa.

EasyHtml:n lomakeavustajasta löytyy monia lomakkeeseen laitettavia tageja,

esim. salasanakenttä, tekstikenttä yms.

Tässä hieman selityksiä niistä:

Uusi lomake: Luo uuden lomake-ryhmän. Jos haluat esim. lähettää jotain niin KAIKKIEN LÄHETETTÄVIEN kenttien/ryhmien pitää sijaita "<FORM ACTION...":n ja "</FORM>":n VÄLISSÄ.

Salasanakenttä: Luo alueen, johon voi kirjoittaa salasanan. Eli teksti näkyy ruudulla tähtinä.

Teksti: Luo alueen johon voi kirjoittaa tekstiä (yhden rivin verran).

Tekstialue: Luo alueen johon voi kirjoittaa isomman määrän tekstiä (esim. sähköposti-viestin)

Valitse vaihtoehto- ryhmä: Luo vaihtoehto-nappeja joista voi valita.

Rasti ruutuun- ryhmä: Luo ruutuja, joihin voi laittaa rastin.

Listaus laatikko: Luo laatikon, josta voi valita eri vaihtoehtoja selaamalla alas tai ylös.

Pudotus laatikko: Luo laatikon, josta voi valita eri vaihtoehtoja.

Lähetä: Luo napin, jota painamalla lomakkeen tiedot lähetetään. Value- kohtaan laitetaan teksti, joka lukee nappulan päällä.

Tyhjennä: Luo napin, joka tyhjentää lomakkeen tiedot.

Piilotettu: Nämä kentät riippuvat myös palvelimestasi.


Linkit
Help created with evaluation version of HelpMaker 2.1

Linkit

Linkkiavustassa on kolme ruutua, ensimmäiseen ruutuun tulee linkin protokolla (esim. news:, telnet:// , http:// , ftp://, gopher:// tai "lähetä postia")

Toiseen ruutuun tulee itse osoite.  Eli, jos haluat linkin tavalliselle internet-sivulle laita protokollaksi http:// ja toiseen ruutuun osoite (esim. www.yahoo.com). Sähköpostilinkin taas saat laittamalla protokollaksi "lähetä postia" ja osoite-ruutuun sähköpostiosoite. Jos haluat linkin samassa hakemistossa olevaan tiedostoon, tai samaan sivustoon kuuluvalle sivulle, valitse "ei protokollaa" ja osoite-ruutuun tiedoston nimi.

Kolmanteen ruutuun tulee linkin kuumasana, eli se mikä näkyy sivulla alleviivattuna ja josta painamalla pääsee linkin osoittamaan kohteeseen.

Linkki on siis muotoa: <A HREF="protokolla://osoite">Kuumasana</A>

Esim. internet-sivun linkki on seuraava:

<A HREF="http://www.sci.fi/~ollihele">Tästä pääset Toni Heleniuksen kotisivulle</A>

Sähköpostilinkki taas on seuraavanlainen:

<A HREF="mailto:toni.helenius@sci.fi">Postia Tonille</A>

Tai:

<A HREF="mailto:toni.helenius@sci.fi?subject=Palautetta EasyHtml:stä">Palautetta Tonille</A>

Sähköpostilinkkiä clickaamalla oletus sähköposti ohjelma aktivoituu ja kirjoittaa kirjeen otsikoksi (jos määritelty, muuten jää puhtaaksi) sähköpostilinkin "subject" osion, linkki avustajassa sähköpostilinkkiin saat "subject":n valitsemalla "Otsikko (subject)":n.

Kuvan käyttö linkkinä, onnistuu seuraavasti: <A HREF="sivu.htm"><IMG SRC="kuva.gif"></A>, mallissa painamalla "kuva.gif:iä" avautuu "sivu.htm". Kun kuvaa käytetään linkkinä, kuvalle tulee sininen reunus, (aivan kuten linkitkin ovat sinisiä ja alleviivattuja). Reunus saadaan pois kirjoittamalla:  <A HREF="sivu.htm"><IMG SRC="kuva.gif" BORDER=0></A>.

Vinkki! Voit kirjoitta osoitteen (http://www... tai mailto:..@...) tai kuumansanan ennen Linkkiavustajan käynnistystä. Valitse se ja käynnistä Linkkiavustaja, Linkkiavustaja analysoi valitun tekstin ja asettaa protokollan (esim. http:// tai mailto:) ja osoitteen tai vain kuumansanan.


Fontit
Help created with evaluation version of HelpMaker 2.1

Fontit

Fontin tarkkoja määritelmiä (<FONT FACE=fontin nimi>) käytetään internetissä hyvin harvoin, sillä jos sivujen selaajalla ei ole sivulle määriteltyjä fontteja näkee hän tekstin tilalla jotain muuta, yleensä epämääräistä kuutioiden ja viivojen sekotusta.

Fonttiavustaja hakee joka käynnistyskerralla sinun käyttöjärjestelmääsi asennetut fontit ja näyttää niiden nimet. Fonttiavustajassa oletusarvo "ei fonttia" on laitettu sillä sitä käytetään harvoin enkä rohkaise sinuakaan niitä käyttämään jos ei ole välttämätöntä (katso sivun ylin jae).

Fontin kokoja on yhdestä kuuteen (<FONT SIZE=numero>). Mitä suurempi numero "SIZE" komennon jälkeen, sitä suurempi fontin koko. Fonttiavustaja luo koodin niistä valintasi mukaan. Jos et määritä kokoa, kooksi tulee normaali tai määrittämäsi fontin (nimen) oletus koko.

Fontille voit valita värin, 16 perusväriä on valmiiksi määritelty, jos se ei riitä niin voit valita yhden värin kaikista näyttösi tukemista väreistä (voi muuttaa tätä esim. menemällä oma tietokone/my computer, ohjauspaneeli/control panel ja näytön astetukset/display settings) painamalla "Muu väri" nappia. Se luo koodin <FONT COLOR=väri>.

Lihavoi komento Fonttiavustajassa luo koodin <B>..</B> joka lihavoittaa kaiken niiden välissä olevan tekstin. Alleviivaa komento taas luo koodin <U>..</U> joka alleviivaa kaiken niiden välissä olevan tekstin. Kursivoi komento luo koodin <I>..</I>. Yliviivaa komento luo koodin <S>..</S>. Näitä toimintoja voi käyttää yhtäaikaa.

Kun luot koodin Fonttiavustajalla siitä tule esimerkiksi tälläinen <B><FONT FACE=Arial SIZE=4>T</FONT></B>, sinun pitää kirjoittaa haluamaasi teksiä T:llä merkityyn kohtaan, tekstiä voit kirjottaa niin pitkälti kuin haluat.


Laitevaatimukset
Help created with evaluation version of HelpMaker 2.1

Laitevaatimukset

EasyHtml vaatii Windows 95/98 tai Windows NT 4.00 tai uudemman, EasyHtml:n pitäisi toimia jokaisessa tulevassa 32 bittisessä käyttöjärjestelmässä. Mutta EasyHtml helpin pitäisi näiden lisäksi toimia myös Windows 3.xx:ssä.

32 bittisen käyttöjärjestelmän lisäksi se vaatii:

Vähintään 486/66 (värikoodauksen vuoksi).

Vähintään 4mt RAM-muistia.

Noin 3mt vapaata kovalevy tilaa.

HUOM! Scrollaaminen on hidasta, aina, oli sitten koneesi mikä tahansa. Hitaus johtuu (taas) värikoodauksesta. Saan sen ehkä korjattua seuraavaan versioon. Pahoittelen!


Hieman HTML:n alkeita
Help created with evaluation version of HelpMaker 2.1

Hieman HTML:n alkeita

HTML on lyhenne sanoista: HyperText Markup Language. Se on ohjelmointikieli jolla ohjelmoidaan Internet eli WWW (World Wide Web) sivuja.

Aina HTML- tiedostoissa, teit sen sitten millä tahansa, pitää HTML-kielen olla parametrien <HTML> ja </HTML> välissä. Ne määrittävät selaimelle, että tiedostosi on HTML-kieltä, muuten selaimesi näyttää tiedoston tavallisena teksti-tiedostona vaikka tiedoston pääte olisikin HTM tai HTML (HTML-tiedostojen pääte), mutta suosittelen käyttämään HTM päätettä sillä HTML pääte ei välttämättä toimi Windows 3.xx:ssa.

Title (<TITLE>) määritää dokumentin nimen. Esimerkiksi: <TITLE>Tonin kotisivut</TITLE>.

Aina HTML-kielessä käsky lopetetaan laittamalla käskyn eteen /-merkin. Esimerkiksi: <CENTER>Tervetuloa</CENTER>, (center komento keskittää tekstin tai kuvan) oheisessa esimerkissä CENTER käsky lopetetaan "Tervetuloa" tekstin jälkeen. Ilman </CENTER> käskyä kaikki tekstit tai kuvat "Tervetuloa" tekstin jäkeen olisivat keskitettyjä.


Värit
Help created with evaluation version of HelpMaker 2.1

Värit

HTML-kieli tukee 256 valmiiksi määriteltyä väriä, EasyHtml:n jokaiseen avustajaan (joka antaa käyttää värejä) on määritelty 16 perusväriä: Musta, harmaa, hopea, valkoinen, punainen, purppura, fuksia, keltainen, akvamariini, sininen, laivaston sininen, vihertävän sininen, limetti, vihreä, oliivi ja kastanjanruskea. Jos 16 perusväriä ei riitä, jokaisessa avustajassa (joka antaa käyttää värejä) on nappi "Muu väri", se antaa sinun valita yhden värin JOKAISESTA näyttösi väristä. Voit määrittää värit itse tai käyttää EasyHtml:n Väriavustajaa jonka voit käynnistää joko paneelilta napista tai menusta Työkalut, Väriavustaja.

Väriavustajan vaihtoehtoja:

Tekstin väri = Muuttaa dokumentin "leipätekstin" värin, komennon alapuolelta. Komento ohittaa BODY osiossa määritellyn tekstin värin.

Taustan väri = Dokumentille voidaan määrittää tietty taustaväri. Jos dokumentille ladataan sekä taustakuva että taustaväri, niin taustakuva ohittaa taustavärin. Taustaväri on kuitenkin se väri, joka lukijalle näkyy ennen taustakuvan latautumista. Koodirivin pitää olla BODY osiossa.

Body: Teksti = Muuttaa koko dokumentin "leipätekstin" värin. Koodirivin pitää olla BODY osiossa.

Body: Linkki = Muuttaa linkkien värin haluamaksesi. Koodirivin pitää olla BODY osiossa.

Body: aLinkki = Muuttaa aktiivisen linkin (eli sen, jota napsautetaan) väriä. Koodirivin pitää olla BODY osiossa.

Body: vLinkki = Muuttaa käytetyn linkin (eli jossa olet jo käynyt kerran tai useamman) väriä. Koodirivin pitää olla BODY osiossa.

Vain koodi = Tulostaa ruudulle vain värin koodin (ei oikeastaan mitään merkitystä).

"Koodirivin pitää olla BODY osiossa" tarkoittaa sitä, että määritelmän pitää sijaita <BODY> tekstin sisällä, BODY osiossa voi myös olla useita määritelmiä. Esimerkiksi jos haluan tekstin punaiseksi ja linkit mustaksi: <BODY TEXT="#FF0000" LINK="#000000">.


Taulukot
Help created with evaluation version of HelpMaker 2.1

Taulukot

HTML-kielessä voit myös tehdä taulukoita, niillä voit esim. jakaa tekstiä palstoihin. Tämä onnistuu helposti EasyHtml:llä. Taulukko-painikkeen löydät työkalurivistä, tai valitsemalla "Työkalut" ja "Taulukkoavustaja".

Taulukot sijoitetaan tagien: <TABLE> ja </TABLE> väliin. <TABLE> -  tagiin voidaan myös sijoittaa parametrit: BORDER=5 (määrittelee taulukon reunan paksuuden pikseleinä) , CELLSPACING=5 (määrittelee solujen välin pikseleinä), CELLPADDING=5 (määrittelee solun sisällön ja solun reunan välisen tilan), WIDTH=300 HEIGHT=400 (taulukon leveys ja korkeus) BORDERCOLOR="väri" (reunojen väri, ei toimi vanhemmissa netscapeissa) sekä ALIGN- ja VALIGN- arvot (taulukon sijoittuminen sivulla leveyssuunnassa ja pystysuunnassa esim. ALIGN=right).

Uusi taulukon vaakarivi sijoitetaan aina tagien <TR> ja </TR> väliin.

Solut tulee taas tagien <TD> ja </TD> väliin.

Taulukon otsikkosolut laitetaan tagien <TH> ja </TH>väliin.

Otsikkosolut poikkeavat tavallisista soluista siten, että niiden sisältö on lihavoitu. Solu siis tarkoitaa yhtä taulukon ruutua.

<TD> ja <TH> tageihin voidaan myös sijoittaa parametrit: BGCOLOR (taustaväri) BACKGROUND (vain explorereissa) ALIGN ja VALIGN (solun sisällön sijoittuminen vaaka- ja pystysuunnassa) sekä COLSPAN ja ROWSPAN (solun leveys ja korkeus soluina).

Esimerkkejä:

tässä yksinkertainen taulukko:

<TABLE BORDER=1>

<CAPTION>otsikko</CAPTION>

<TR><TH>sarake 1</TH><TH>sarake 2</TH><TH>sarake 3</TH>

<TR><TD>2. rivi sarake 1</TD><TD>2. rivi sarake 2</TD><TD>2. rivi sarake 3</TD>

</TABLE>

toinen taulukko:

<TABLE BORDER=4 ALIGN="center">

<CAPTION ALIGN="right">Esimerkkitaulukko</CAPTION>

<TR><TD COLSPAN=3>3 solun levyinen solu</TD>

<TR><TD>solu1</TD><TD>solu2</TD><TD>solu3</TD>

<TR><TD BGCOLOR="red">solu4</TD><TD>solu5</TD><TD>solu6</TD>

</TABLE>


Kuvat
Help created with evaluation version of HelpMaker 2.1

Kuvat

HTML-kieli tukee neljää kuvaformaattia: JPG, GIF, PNG, XBM. EasyHtml tukee kaikkia näitä neljää. Voit saada kuvan HTML dokumenttiisi kirjoittamalla koodin itse tai käyttämällä EasyHtml:n Kuva-avustajaa, joka löytyy paneelilta nappina ja menusta Työkalut, Kuva-avustaja. EasyHtml tekee koodin: <IMG SRC="valitsemasi tiedosto" ALT="" BORDER=0>. Sinun ei tarvitse muuttaa "IMG SRC="..."" osiota, mutta voit muuttaa "ALT" osiota, ALT komento tarkoittaa sitä kun kuva ei ole latautunut kokonaan näkyy ALT osio kuvan tilalla, ALT komento vaikuttaa myös jos käyttää "browseria" joka ei osaa näyttää kuvia niin ALT osio näkyy kuvan tilalla. Malli: <IMG SRC... ALT="Tervetuloa"...>, kuvan tilalla (siis jos kuva ei ole latautunut tai käytät browseria joka ei osaa lukea kuvia) lukee Tervetuloa.

Myös "BORDER" osiota voit muuttaa, BORDER komento tarkoittaa kuvan ympärillä olevan kehyksen paksuutta. Voit kasvattaa kehyksen paksuutta kasvattamalla numeron arvoa.

Leveys- ja pituus arvoja muuttamalla voit muuttaa kuvan kokoa.

Vaaka- ja pystymarginaaleilla saat lisättyä tyhjää tilaa kuvan ympärille.

Kuvan asemointia tekstiin nähden voi myös helposti muutta EasyHtml:n kuva-avustajalla:

Ylhäällä:  kuvan yläreuna on tekstin yläreunan tasolla.

Keskellä: kuvan keskikohta on tekstin alareunan tasolla.

Alhaalla:  kuvan alareuna on tekstin tasolla.

AbsBottom: kuvan alareuna on tekstin alareunan tasolla.

AbsMiddle: kuvan keskikohta on tekstin yläreunan tasolla.

Baseline: kuvan alareuna on tekstin tasolla.

Texttop: kuvan yläreuna on tekstin yläreunan tasolla.

Taustakuvan asettaminen: Voit määrittää taustakuvan itse tai käyttämällä EasyHtml:n Kuva avustajaa, joka löytyy paneelilta nappina ja menusta Työkalut, Kuva avustaja. Taustakuva määre pitää löytyä BODY osiosta. Esimerkiksi näin: <BODY BACKGROUND="taustakuva.gif">.

Kuva avustajassa voit valita ("Näytä myös polku") upottaako EasyHtml koodiin tiedoston nimen sekä polun, jolloin kuvien ei tarvitse olla samassa hakemistossa, jos lähetät sivun internetiin joudut muuttamaan EasyHtml:n tekemää koodia.

Jos taas et valitse "Näytä myös polku" EasyHtml upottaa pelkän tiedoston nimen koodiin (kun avaat kuvan EasyHtml:llä). Ominaisuus joka tekee tästä vaihtoehdosta oletus vaihtoehdon on: jos lähetän sivun internettiin sinun ei välttämättä tarvi muuttaa EasyHtml:n tekemää koodia. Mutta kuvien pitää olla samassa hakemistossa.


Bugi lista
Help created with evaluation version of HelpMaker 2.1

Bugi lista

Bugi lista:

Versio 1.0 : Linkki avustajassa kun valitsi "Lähetä postia" ja "Otsikko" niin EasyHtml loi koodin jossa oli 1 merkki liikaa.

Versio 1.5 : Kaikki korjattu edellisestä versiosta. 100% bugi-free!

Versio 1.8 : Esikatselu ei aina toiminut Netscapen ollessa oletus selaimena.

Versio 2.1 : Esikatselu bugi korjattu.

Versio 2.2 : Bugit korjattu. 100% bugi-free (no ainakin tietääkseni)!

Auta EasyHtml:n kehitystä: Raportoi bugeista, kiitos!

HUOM! Jos saat virheilmoituksen:"Access violation at address xxxxxxx...", niin ilmoitathan minulle addressin (xxxxx...). Kiitos!


Historia
Help created with evaluation version of HelpMaker 2.1

Historia

EasyHtml ohjelmointihistoria:

Versio 1.0 : Ensimmäinen versio

Versio 1.5 : Lisäyksiä on monia esim. Tagien värikoodaus, 2 uutta avustajaa, käyttäjä saa vaikuttaa EasyHtml:n asetuksiin ja moniin muihin asioihin ja tietenkin muita pieniä kosmeettisia muutoksia.

Versio 1.8 : Lisää monia pieniä ominaisuuksia kuten pikänäppäimiä joilla saa esim. koodin <B></B> nopeasti. Sekä taustakuvan voi asettaa EasyHtml:ään. Suurin uudistus on että, EasyHtml:ään voi avata monta HTML-dokumenttia kerrallaan. Kosmeettisia uudistuksia on myös. Ja käyttäjä saa nyt vaikuttaa vieläkin enemmän EasyHtml:n asetuksiin. Sekä mahdollistaa monen dokumentin avaamisen yhtäaikaa, tätä kutsutaan MDI:ksi (Multiple Document Interface).

Versio 2.1 : Lisää paljon kosmeettisia muutoksia kuten liukuväri. Ja "leijuvan työkalupalkin", eli voit siirrellä painike-ryhmiä, ja EasyHtml tallentaa työkalupalkkien sijainnit lopetuksessa. Käyttäjäntagit, jonne voit tallentaa omia tageja ja lisätä niitä kätevästi HTML-dokumenttiisi. JavaScriptit, yhteensä 12 (+1, mallina käyttäjäntageissa) hienoa JavaScriptiä. Erikoismerkitavustaja, Upotusavustaja ja kommentti (avustaja). Kieliä: Englanti ja Suomi. Sekä "QUICK FILE OPENER":n (asiakkaan toivomuksesta), joka tarjoaa nopean tavan avata HTML-tiedostoja (voit kytkeä sen pois päältä halutessasi). Ja nyt voit valita avustajissa, joissa voi vaihtaa väriä, 16 perusvärin lisäksi yhden värin kaikista näyttösi väreistä. Optimoitu koodi, joka parantaa toimivuutta ja nopeuttaa. ESKO-sisään rakennettu selain, joka pystyy samaan kuin asennettu IE. Sekä nyt EasyHtml mahdollistaa omien työkalurivien tekemisen!

Versio 2.2 : Lisäyksiä vähän, mutta lisäykset ja muutokset ovat erittäin tärkeitä. Asetuksiin lisätty pari avustajiin liittyvää hyödyllistä asetusta. Merkittävin muutos joka tuo lisää vakautta ja nopeutta liittyy "lomakkeiden" käsittelyyn; tässä versiossa lomakkeet luodaan kun niitä tarvitaan eikä yhtään ennemmin, mikä näkyy nopeudessa, vakaudessa ja alhaisemmassa muistin käytössä. Myös uusi avustaja: Imagemapperavustaja. Lisäksi muutama kosmeettinen muutos.


Muita HTML-koodeja
Help created with evaluation version of HelpMaker 2.1

Muita HTML-koodeja

Tekstin välkkyminen <BLINK>:

<BLINK> tagien välissä oleva teksti tai kuva välkkyy. esim: <BLINK>välkkyvää tekstiä</BLINK>, toimii vain Netscapessa.

Syvennetty viiva <HR>:

<HR> luo vaakasuoran viivan, joka kulkee sivun laidasta toiseen.

Viivan leveyttä ja korkeutta voi säädellä esim: <HR WIDTH=300> tämä tagi luo viivan, joka on 300 pikseliä leveä, ja lähtee sivun vasemmasta laidasta. Leveyden (width) ja korkeuden (height) voi ilmoittaa pikseleinä (width=350) tai prosentteina (width=40%), jolloin viivan leveys on 40% sivun leveydestä.  Viivan saa keskitettyä tai laitettua oikeaan reunaan kirjoittamalla <HR WIDTH=100 ALIGN=right, left tai center>

Rivinvaihto <BR>:

<BR> tagi vaihtaa riviä, eli jos HTML-koodissa esiintyy tagi <BR>, sen jälkeen tuleva teksti/kuva alkaa seuraavalta riviltä.

Keskitä tekstiä <CENTER>:

Ks. "Hieman HTML:n alkeita".

Osoite <ADDRESS>:

<ADDRESS> tagien väliin voi kirjoittaa esim. osoitteensa jolloin ADDRESS tagi antaa osoitteelle hienon ulkoasun. Esim. <ADDRESS>Toni Helenius<BR>Ruohotie 5<BR>45260 Valkeala 2<BR><B>FINLAND</B></ADDRESS> koodirivi näkyy selaimessasi seuraavasti:

Toni Helenius

Ruohotie 5

45260 Valkeala 2

FINLAND

Yksinkertainen taulukointi <PRE>:

PRE käsky on hyvä esim. taulukointiin sillä niiden väliin kirjoitettu teksti näkyy aivan samalla tavalla kuin se on kirjoitettu. Tavallista tekstiä kirjottaessasi et saa kuin yhden välilyönnin kun taas PRE tagien välissä saat niin monta välilyöntiä kuin vain ruudulle mahtuu. Ja rivi vaihdetaan painamalla enteriä, eli tavallisesti (niin kuin tekstiä käsitellessä!) kun taas tavallisessa HTML koodissa rivi vaihdetaan kirjoittamalla <P> tai <BR>. Mutta aina PRE tagien välissä oleva teksti ei toimi kunnolla (riippuen näytön resoluutiosta, browserista...jne.), joten jos aikaa ja ammattitaitoa riittää niin suosittelen käyttämään taulukkoa (siis <TABLE>). Katso taulukosta tietoa TAULUKOT osiosta.


Listat
Help created with evaluation version of HelpMaker 2.1

Listat

Kotisivulla voi käyttää kolmentyyppisiä listoja:

Luettelomerkki:

   Lista, jossa jokainen rivi alkaa luettelomerkillä, esim:

<UL>

  <LI>1. asia

  <LI>2. asia

  <LI>3. asia

</UL>

Äskeinen koodi näyttää tältä:

   • 1. asia

   • 2. asia

   • 3. asia

Luettelomerkin tyyliä voi myös vaihtaa, esim. <UL type=square> (luettelomerkkinä neliö)  tai <UL type=circle> (luettelomerkkinä ympyrä)

Numeroitu lista:

   Lista, jossa jokainen rivi on numeroitu, esim:

<OL>

   <LI>ensimmäinen asia

   <LI>toinen asia

</OL>

Äskeinen koodi näyttää tältä:

   1. ensimmäinen asia

   2. toinen asia

Numeroinnin voi aloittaa myös jostain muustakin numerosta, esim.

<OL start=5> jolloin listaus  alkaa numerosta viisi.

Lista voi olla myös roomalaisin numeroin, tai aakkosin, esim:

<LI type=a> pienet aakkoset    <LI type=A> suuret aakkoset

<LI type=i> pienet roomalaiset numerot, i ii iii iv jne.

<LI type=I> suuret roomalaiset numerot, I II III IV jne.

Type lisäys tarvitsee laittaa vain listan ensimmäiseen <LI>-tagiin.

Määrittelylista:

   Lista, jonka jokainen osa on määritelty sisennetyllä rivillä:

<DL>

<DT>ensimmäinen asia

<DD>ensimmäisen asia selitys

<DT>toinen asia

<DD>toisen asian selitys

</DL>

Äskeinen koodi näyttää tältä:

   ensimmäinen asia

         ensimmäisen asian selitys

   toinen asia

         toisen asian selitys

Jos käytät vain pelkkää <DT>- tagia, saat listan, jossa rivit ovat vain allekkain ilman luettelomerkkejä.